<template>
  <div>
    <el-card>
      <div style="display: flex; justify-content: space-between">
        <el-button
          type="primary"
          @click="$router.push('/accountManager/manageradd')"
          >添加</el-button
        >
        <div>
          <el-input
            v-model="input"
            style="width: 240px"
            placeholder="Please input"
            clearable
            @clear="clear"
            @change="enter"
          />
          <el-button type="primary" @click="search" style="margin-left: 10px"
            >搜索</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="180" />
        <el-table-column prop="name" label="昵称" />
        <el-table-column prop="date" label="头像" v-slot="{ row }">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="URL + '/' + row.avatar"
          />
        </el-table-column>
        <el-table-column prop="role.role_name" label="角色" />
        <el-table-column prop="address" label="操作" v-slot="{ row }">
          <el-button
            type="primary"
            @click="$router.push(`/accountManager/manageredit?id=${row.id}`)"
            >编辑</el-button
          >
          <el-button type="danger" @click="delManager(row)">删除</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
const URL = import.meta.env.VITE_APP_API_URL;
import { reqManagerList, reqManagerDel } from "@/api/manager/index";
import { reqRolesList } from "@/api/roles/index";
import { ResRolesList } from "@/api/roles/model";
import { ResManagerList } from "@/api/manager/model";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const $route = useRoute();
const page = ref<number>(1);
const pageSize = ref<number>(4);
const total = ref<number>(0);
const input = ref<string>("");
const tableData = ref<ResManagerList[]>([]);

const rolesList = ref<ResRolesList[]>([]);

// 删除管理员
const delManager = (row: any) => {
  ElMessageBox.confirm(`确定删除${row.name}管理员吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  })
    .then(async () => {
      await reqManagerDel(row.id);
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getManagerList();
    })
    .catch(() => {});
};

// 回车搜索
const enter = () => {
  getManagerList(input.value);
};

//清除搜索内容
const clear = () => {
  getManagerList();
};
// 切换页码
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getManagerList();
};

// 搜索
const search = () => {
  getManagerList(input.value);
};
// 获取角色列表
const getRolesList = async () => {
  let data = await reqRolesList({
    page: page.value,
    pageSize: pageSize.value,
    keyword: input.value,
  });
  rolesList.value = data.rows;
};
// 获取管理员列表
const getManagerList = async (keyword = "") => {
  let data = await reqManagerList({
    page: page.value,
    pageSize: pageSize.value,
    keyword,
  });
  tableData.value = data.rows;
  total.value = data.count;
};

onMounted(() => {
  getManagerList();
  getRolesList();
});
</script>

<style scoped lang="scss">
.el-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px dotted rgb(202 194 194);
}
</style>
